<template>
  <view>
    <uni-popup ref="popup" type="bottom" :animation="true" @change="change">
      <view class="popup-content">
        <view>
          <view class="headBox">
            <view @click="close"><text class="text1">取消</text></view>
            <view v-if="titleShow" class="uni-page-head-title">{{ timeTitle }}</view>
            <view><text class="text1 blue" @click="ok">确定</text></view>
          </view>
          <picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange">
            <picker-view-column v-for="(arr, n) in dateTimeArr" :key="n">
              <view v-for="(obj, index) in arr" :key="index" class="item">{{ obj }}{{ unitArr[n] || '' }}</view>
            </picker-view-column>
            <!-- <picker-view-column>
							<view class="item" v-for="(item, index) in years" :key="index">{{item}}年</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item, index) in months" :key="index">{{item}}月</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item, index) in days" :key="index">{{item}}日</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item, index) in hourArr" :key="index">{{item}}时</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item, index) in minArr" :key="index">{{item}}分</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item, index) in secondArr" :key="index">{{item}}秒</view>
						</picker-view-column> -->
          </picker-view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import uniPopup from '../uni-popup/uni-popup.vue';

export default {
  name: 'MyDatetime',
  components: {
    'uni-popup': uniPopup
  },
  props: {
    titleShow: {
      type: Boolean,
      default: true
    },
    timestr: {
      // 是否展开
      type: String,
      default: ''
    },
    // 显示位数
    shownum: {
      type: [String, Number],
      default: 6
    }
  },
  data() {
    const date = new Date();
    const years = [];
    const year = date.getFullYear();
    const months = [];
    const month = date.getMonth() + 1;
    const days = [];
    const day = date.getDate();
    for (let i = 1970, len = date.getFullYear() + 100; i <= len; i++) {
      years.push(i);
    }
    for (let i = 1; i <= 12; i++) {
      months.push(i < 10 ? ('0' + i.toString()) : i);
    }
    for (let i = 1; i <= 31; i++) {
      days.push(i < 10 ? ('0' + i.toString()) : i);
    }
    const hourArr = [];
    for (let i = 0; i <= 24; i++) {
      hourArr.push(i < 10 ? ('0' + i.toString()) : i);
    }
    // 分、秒
    const minSecond = [];
    for (let i = 0; i <= 59; i++) {
      minSecond.push(i < 10 ? ('0' + i.toString()) : i);
    }
    return {
      thirtyOne: days,
      dateArr: [years, months, days, hourArr, minSecond, minSecond],
      unitArr: ['年', '月', '日', '时', '分', '秒'],
      obj: { 0: 'year', 1: 'month', 2: 'day', 3: 'hour', 4: 'minute', 5: 'second' },
      years,
      months,
      days,
      hourArr,
      minArr: minSecond,
      secondArr: minSecond,
      year,
      month,
      day,
      hour: '00',
      minute: '00',
      second: '00',
      value: [year - 1970, month - 1, day - 1],
      visible: true,
      indicatorStyle: `height: 100rpx;`,
      timer: null
    };
  },
  computed: {
    // 时间对象
    dateTimeArr() {
      var num = parseInt(this.shownum) || 6;
      if (num <= 6 && num > 0) {
        return this.dateArr.slice(0, num);
      }
      return this.dateArr;
    },
    // 时间展示
    timeTitle() {
      var str = '';
      var num = parseInt(this.shownum) || 6;
      if (num > 0 && num < 6) {
        for (var i = 0; i < num; i++) {
          str = str + this[this.obj[i]] + this.unitArr[i];
        }
        return str;
      }
      return `${this.year}年${this.month}月${this.day}日${this.hour}时${this.minute}分${this.second}秒`;
    }
  },
  watch: {
    // 月份
    month() {
      this.countDay();
    },
    year() {
      this.countDay();
    }
  },
  created() {},
  destroyed() {
    this.timer && clearTimeout(this.timer);
  },
  methods: {
    // 计算天数
    countDay() {
      var index = new Date(this.year, parseInt(this.month), 0).getDate();
      var days = this.thirtyOne.slice(0, index);
      this.dateArr.splice(2, 1, days);
      this.days = days;
    },
    // 时间回填 timeStr: 2020-01-01 00:00:00
    timeFill(timeStr) {
      var dateObj = timeStr ? new Date(timeStr.replace(/-/g, '/')) : new Date();
      var timeObj = {
        year: dateObj.getFullYear(),
        month: dateObj.getMonth() + 1,
        day: dateObj.getDate(),
        h: dateObj.getHours(),
        m: dateObj.getMinutes(),
        s: dateObj.getSeconds()
      };

      this.timer = setTimeout(() => {
        this.value = [(timeObj.year - 1970) || 0, timeObj.month - 1, timeObj.day - 1, timeObj.h, timeObj.m, timeObj.s];

        this.year = this.years[this.value[0]];
        this.month = this.months[this.value[1]];
        this.day = this.days[this.value[2]];
        this.hour = this.hourArr[this.value[3]];
        this.minute = this.minArr[this.value[4]];
        this.second = this.secondArr[this.value[5]];
      }, 100);
    },
    // 确认
    ok() {
      var obj = {
        year: this.year,
        month: this.month,
        day: this.day,
        hour: this.hour,
        minute: this.minute,
        second: this.second,
        1: this.year,
        2: `${this.year}-${this.month}`,
        3: `${this.year}-${this.month}-${this.day}`,
        4: `${this.year}-${this.month}-${this.day} ${this.hour}`,
        5: `${this.year}-${this.month}-${this.day} ${this.hour}:${this.minute}`,
        6: `${this.year}-${this.month}-${this.day} ${this.hour}:${this.minute}:${this.second}`
      };
      var num = parseInt(this.shownum) || 6;
      if (num <= 0 || num > 6) {
        num = 6;
      }
      this.$emit('ok', obj[num], obj);
      this.close();
    },
    // 弹窗
    open(timeStr) {
      this.$nextTick(res => {
        this.timeFill(timeStr || this.timestr || '');
        this.$refs.popup.open();
      });
    },
    /**
			 * 关闭窗口
			 */
    close() {
      // 执行父组件的close事件，关闭弹出层
      this.$refs.popup.close();
    },
    /**
			 * popup 状态发生变化触发
			 * @param {Object} e
			 */
    change(e) {
      // console.log('popup ' + e.type + ' 状态', e.show)
    },
    bindChange: function(e) {
      // console.log(e)
      const val = e.detail.value;
      this.year = this.years[val[0]];
      this.month = this.months[val[1]];
      this.day = this.days[val[2]];
      this.hour = this.hourArr[val[3] || 0];
      this.minute = this.minArr[val[4] || 0];
      this.second = this.secondArr[val[5] || 0];
    }
  }
};
</script>

<style scoped>
	.popup-content{
		background-color: #FFFFFF;
	}
	.text1{
		padding: 0 28rpx;
		font-size: 34rpx;
		line-height: 90rpx;
		color: #888;
		float: left;
	}
	.blue{
		float: right;
		color: #007aff;
	}
	.uni-page-head-title {
		display: inline-block;
		padding: 0 20rpx;
		font-size: 26rpx;
		height: 88rpx;
		line-height: 88rpx;
		color: #BEBEBE;
		box-sizing: border-box;
	}
	.headBox{
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #e5e5e5;
	}
	picker-view {
		width: 100%;
		height: 600rpx;
		margin-top:20rpx;
	}
	.item {
	  line-height: 100rpx;
		height: 100rpx;
	  text-align: center;
		font-size: 30rpx;
	}
</style>
